window.addEventListener("load", function() {
    var prices //设置默认的价格
    var p1 = 349 //意外保障
    var p2 = 159 //保修
    var p3 = 9 //空间卡
    var pes = 2599 //选项金额
    var id = 1

    fetch('http://dbyxs.xyz:3005/goods/mi/ids', {
        method: 'post',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: 'id=1'
    }).then((res) => {
        return res.json()
    }).then(res => {
        console.log(res)
        prices = res.message[0].pricr
        gb(prices)
        return price(prices)
    })

    var wd = document.querySelector(".ws")
        //  console.log(wd.offsetTop)
    document.addEventListener("scroll", function(e) {
        //   console.log("22")
        if (document.documentElement.scrollTop >= 100) {
            wd.style.display = "block"
            wd.style.position = "fixed"
            wd.style.top = 0
        } else if (document.documentElement.scrollTop <= 100) {
            // wd.style.position = 'relative'
            // wd.style.top = 100 + 'px'
            wd.style.display = "none"
        }
    })
    var img = document.getElementById("detail_main_hd")
    var mask = document.querySelector(".mask")
    var detl = document.querySelector(".detail_main_hd2")
    var img2 = document.getElementById("img2")
    img.addEventListener("mouseover", function(e) {
        //   console.log(e)
        mask.style.display = "block"
        detl.style.display = "block"
    })
    img.addEventListener("mouseout", function() {
        mask.style.display = "none"
        detl.style.display = "none"
    })
    img.addEventListener("mousemove", function(e) {
        var x = e.pageX - this.offsetLeft - mask.offsetWidth / 2
        var y = e.pageY - this.offsetTop - mask.offsetHeight / 2
        var a = img.offsetWidth - mask.offsetWidth
        var b = img.offsetHeight - mask.offsetHeight
            // console.log(x)
        if (x <= 0) {
            x = 0
        } else if (x >= img.offsetWidth - mask.offsetWidth) {
            x = img.offsetWidth - mask.offsetWidth
        }
        if (y <= 0) {
            y = 0
        } else if (y >= img.offsetHeight - mask.offsetHeight) {
            y = img.offsetHeight - mask.offsetHeight
        }
        mask.style.left = x + "px"
        mask.style.top = y + "px"
        var a1 = detl.offsetWidth - img2.offsetWidth
        img2.style.left = (x * a1) / a + "px"
        img2.style.top = (y * a1) / b + "px"
    })
    var title = document.querySelector(".title_login")
    var detail = document.getElementById("detail")
    detail.addEventListener("click", function() {
            title.style.display = "none"
        })
        // console.log(location.search.split("=")[0].split("?"))
        // 调用选项
    function gb(prices) {
        var t5sp = document.getElementById('t5sp')
        let li = `
    <span class="sn"><a href="javascript:;">8GB+128GB</a><a href="javascript:;">${prices}元</a> </span>
    <span class=""><a href="javascript:;">6GB+128GB</a><a href="javascript:;">${prices+200}元</a></span>
    <span><a href="javascript:;">8GB+256GB</a><a href="javascript:;">${prices+500}元</a></span>
    `

        t5sp.insertAdjacentHTML('beforeend', li)
        var t5 = document.querySelector(".t5_spn").querySelectorAll("span")
        var t5_m = [`${prices}`, `${prices+200}`, `${prices+500}`]
        for (var i = 0; i < t5_m.length; i++) {
            t5[i].setAttribute('data-it', t5_m[i])
        }
        classname(t5, prices)
    }

    function gb1() {
        var sp1 = document.getElementById('spn2')
        let t5_s = [0, 39, 69]
        let li = `
        <span class="sn"><a href="javascript:;">标配</a> </span>
        <span><a href="javascript:;">+39元得条纹保护壳</a></span>
        <span><a href="javascript:;">+69元得撞色飘带保护壳</a></span>
        `
        sp1.insertAdjacentHTML('beforeend', li)
        var spn2 = document.getElementById("spn2").querySelectorAll("span")

        for (var i = 0; i < t5_s.length; i++) {
            spn2[i].setAttribute('data-its', t5_s[i])
        }
        classname(spn2)
    }
    gb1()
    var spn1 = document.getElementById("spn1").querySelectorAll("span")

    //console.log(t5)
    // for (var i = 0; i < t5.length; i++) {
    //     // t5.style.ClassName = ''
    //     // t5[i].style.ClassName = ''
    //     // t5[i].setAttribute('class', '')
    //     console.log(t5[i].style.ClassName = '')
    //     t5[i].addEventListener('click', function() {
    //         for (var i = 0; i < t5.length; i++) {
    //             t5[i].setAttribute('class', '')
    //         }
    //         this.setAttribute('class', 'sn')
    //     })
    // }
    //  classname(t5, pes)
    classname(spn1)
    var ps1 = 0
    var ps2 = 2229

    function classname(Cla, pel) {

        for (var i = 0; i < Cla.length; i++) {
            // t5.style.ClassName = ''
            // t5[i].style.ClassName = ''
            // t5[i].setAttribute('class', '')
            // console.log(t5[i].style.ClassName = '')
            Cla[i].addEventListener("click", function() {
                // var p2 = Number(this.getAttribute('data-its')) || 0
                // var p3 = Number(this.getAttribute('data-it'))
                let pic1
                console.log(ps1, p3, 'ps1')
                for (var i = 0; i < Cla.length; i++) {
                    Cla[i].setAttribute("class", "")
                    pl(ps1)
                }
                this.setAttribute("class", "sn")
                if (Number(this.getAttribute("data-it"))) {
                    pl(ps1)
                    ps2 = Number(this.getAttribute('data-it'))
                        //pic1 = p3 + p2
                    pic1 = ps2 + ps1
                    console.log(pic1, 'pic1')
                    prices = pic1
                    return price(pic1)
                } else {
                    pl(ps1)
                    console.log(ps1, '上一次的')
                    ps1 = Number(this.getAttribute('data-its')) || 0
                    console.log(ps1, '最新的')
                        // pr(ps1)

                    var pric
                        // pric = p2 + pic1
                    pric = ps2 + ps1
                        // pric = prices + Number(this.getAttribute('data-its'))
                    console.log(prices, pric)
                    prices = pric
                    return price(pric)
                }

            })
        }
    }
    var t8 = document.getElementById("md").querySelectorAll("input")
    var t8c = document.getElementById("md")
    var t8_md = document.getElementById("tds").querySelectorAll("input")
    var t8_md1 = document.getElementById("tds")
    var t8_m = document.getElementById("td2").querySelectorAll("input")
    var t8_m2 = document.getElementById("td2")

    function int(ins, md, pA) {
        var t = pA
        for (var i = 0; i < ins.length; i++) {
            // ins[i].checked = true
            md.setAttribute("class", "t8_md")
            ins[i].addEventListener("click", function() {
                md.setAttribute("class", "t8_md ts")
                if (this.checked) {
                    pr(t)
                    for (var i = 0; i < ins.length; i++) {
                        ins[i].checked = true
                    }
                } else {
                    for (var i = 0; i < ins.length; i++) {
                        ins[i].checked = false
                    }
                    md.setAttribute("class", "t8_md")
                    pl(t)
                }
            })
        }
    }
    int(t8, md, p3) //意外保调动
    int(t8_md, t8_md1, p2) //延长保调用
    int(t8_m, t8_m2, p1) //空间卡调用

    function pr(vals) {
        //  console.log(vals, '有值吗')
        if (vals) {
            prices += vals
            return price(prices)
        } else {
            return prices
        }
        // console.log(prices, '最新的价格吗')
        //  price(prices)
    }

    function pl(vals) {
        if (vals) {
            prices -= vals
            return price(prices)
        }
    }

    function price(prices) {
        // console.log(val)
        if (true) {
            var t7 = document.getElementById("h1")
                //  console.log(t7)
                // var t7 = document.querySelector('.t7').querySelector('h1')
            t7.innerHTML = `总计&nbsp;&nbsp;:${prices}元`
                // var li = `<h1>总计&nbsp;&nbsp;:${prices}元</h1>`
                // t7.insertAdjacentHTML('beforeend', li)
        } else {
            var t7 = document.querySelector(".t7")
            var li = `<h1>总计&nbsp;&nbsp;:${prices}元</h1>`
            t7.insertAdjacentHTML("beforeend", li)
        }
    }
    // price()
});
(function() {
    var spn1 = document.querySelector('.spn1')
    var spn2 = document.querySelector('.spn2')
    var mi = localStorage.getItem('mi') || 0
    if (mi != 0) {
        fetch('http://dbyxs.xyz:3005/user/token', {
            method: 'POST',
            headers: {
                "Content-type": "application/json;charset=UTF-8"
            },
            body: JSON.stringify({
                token: mi
            })
        }).then(res => {
            return res.json()
        }).then(res => {
            //console.log(res.message)
            if (res.err == 200) {
                spn2.innerHTML = res.message.username
                    // spn2.innerHTML = sessionStorage.getItem('users')
                spn1.innerHTML = ''
            }
        })
    } else {
        spn2.innerHTML = '登录'
    }
    spn1.addEventListener('click', function() {
        if (spn2.innerHTML == '注册') {
            return
        } else {
            location.href = './login.html'
        }
    })
    spn2.addEventListener('click', function() {
        if (spn2.innerHTML != '登录') {
            return
        } else {
            location.href = './sign.html'
        }
    })
})()